{% extends "base.html" %}

{% block title %}
    {% if title %}
        {{ title }}
    {% else %}
        Django音乐推荐系统
    {% endif %}
{% endblock %}

{% block head %}
<style>
    .music-player-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 10px;
    }
    
    .music-player-row a {
        margin-right: 15px;
    }
    
    .btn-play-direct {
        cursor: pointer;
        color: #17a2b8;
    }
    
    .btn-play-direct:hover {
        text-decoration: underline;
    }
    
    .inline-player {
        width: 100%;
        display: none;
        margin-top: 10px;
    }
    
    .audio-controls {
        width: 100%;
    }
</style>
{% endblock %}

{% block body %}
    <div class="list-group" style="margin-top: 20px">
        {% for music in musics %}
            <div class="list-group-item flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">
                        <a href="/music/{{ music.pk }}" class="song-title" data-id="{{ music.pk }}" data-url="{{ music.url }}">{{ music.song_name }}</a>
                        <small class="btn-play-direct" onclick="togglePlayer({{ music.pk }})">▶ 直接播放</small>
                    </h5>
                    <small>{{ music.song_length }} ms</small>
                </div>
                <p class="mb-1">
                    歌手：{{ music.artist_name }} 作曲：{{ music.composer }} 作词：{{ music.lyricist }}
                </p>
                <small class="text-muted">流派：{{ music.genre_ids }}</small>
                <small class="text-muted">语种：{{ music.language }}</small>
                {% if music in user_likes %}
                    <p class="mb-1 text-danger">已添加到用户喜欢</p>
                {% endif %}
                {% if music in user_dislikes %}
                    <p class="mb-1 text-warning">已添加到用户不喜欢</p>
                {% endif %}
                
                <!-- 内嵌播放器 -->
                <div id="player-{{ music.pk }}" class="inline-player">
                    <audio id="audio-{{ music.pk }}" class="audio-controls" controls>
                        <source src="{{ music.url }}" type="audio/mpeg">
                        您的浏览器不支持音频播放功能。
                    </audio>
                </div>
                
                <div class="dropdown-divider"></div>
                <div class="music-player-row">
                    <a href="/play/{{ music.pk }}" target="_blank" class="btn btn-outline-info">视觉播放</a>
                    <a href="/like/{{ music.pk }}?from={{ request.get_full_path }}" class="btn btn-outline-danger">喜欢</a>
                    <a href="/dislike/{{ music.pk }}?from={{ request.get_full_path }}" class="btn btn-outline-warning">不喜欢</a>
                    <a href="/music/{{ music.pk }}" class="btn btn-outline-primary">详情评论</a>
                </div>
            </div>
        {% endfor %}
    </div>


    <nav aria-label="Page navigation example" style="margin-top: 20px">
        <ul class="pagination justify-content-center">
            {% if musics.has_previous %}
                <li class="page-item"><a class="page-link" href="?page={{ musics.previous_page_number }}">上一页</a></li>
            {% endif %}

            <li class="page-item">
                <a class="page-link" href="?page=1">第{{ musics.number }}页/共{{ musics.paginator.num_pages }}页</a>
            </li>

            {% if musics.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{ musics.next_page_number }}">下一页</a></li>
            {% endif %}
        </ul>
    </nav>
    
    <script>
        // 切换内嵌播放器的显示/隐藏
        function togglePlayer(musicId) {
            var playerElement = document.getElementById('player-' + musicId);
            var audioElement = document.getElementById('audio-' + musicId);
            
            if (playerElement.style.display === 'block') {
                playerElement.style.display = 'none';
                audioElement.pause();
            } else {
                // 先隐藏所有其他播放器
                var allPlayers = document.querySelectorAll('.inline-player');
                var allAudios = document.querySelectorAll('.audio-controls');
                
                allPlayers.forEach(function(player) {
                    player.style.display = 'none';
                });
                
                allAudios.forEach(function(audio) {
                    audio.pause();
                });
                
                // 显示当前播放器并播放
                playerElement.style.display = 'block';
                audioElement.play().catch(function(error) {
                    console.error('播放失败:', error);
                    alert('音乐播放失败，可能音乐链接已失效');
                });
            }
        }
        
        // 为音频元素添加错误处理
        document.addEventListener('DOMContentLoaded', function() {
            var audioElements = document.querySelectorAll('.audio-controls');
            
            audioElements.forEach(function(audio) {
                audio.addEventListener('error', function() {
                    var musicId = this.id.split('-')[1];
                    alert('音乐ID: ' + musicId + ' 无法播放，可能音乐链接已失效');
                });
            });
            
            // 当点击播放按钮时，记录播放历史
            var audioElements = document.querySelectorAll('.audio-controls');
            audioElements.forEach(function(audio) {
                audio.addEventListener('play', function() {
                    var musicId = this.id.split('-')[1];
                    recordPlayHistory(musicId);
                });
            });
            
            // 使用fetch API记录播放历史
            function recordPlayHistory(musicId) {
                // 这里可以添加一个fetch请求来记录播放历史
                // 或者在服务器端处理
            }
        });
    </script>
{% endblock %}